<template>
  <div class="event-detail" :style="{display: visible ? 'block' : 'none'}">
    <div class="closeBg" @click="closePop"></div>
    <div id="eventBox" class="event-detail-content" ref="eventBox" :style="{top: position.top, left: position.left, margin: position.margin, right: position.right, bottom: position.bottom}">
        <div class="close-button" @click="closePop">
            <close-small theme="outline" size="20" fill="#676662"/>
        </div>
        <div class="event-detail-title">{{(event.info && event.info.title) || '（无主题）'}}</div>
        <div class="event-detail-list">
            <div class="list-cell">
                <calendar-dot theme="outline" size="14" fill="#007bbb"/>
                <div class="cell-content">{{event.info && event.info.actionStartTime}} ~ {{event.info && event.info.actionEndTime}}</div>
            </div>
            <div class="list-cell">
                <local-two theme="outline" size="14" fill="#007bbb"/>
                <div class="cell-content">{{(event.info && event.info.location) || '-'}}</div>
            </div>
            <div class="list-cell">
                <user theme="outline" size="14" fill="#007bbb"/>
                <div class="cell-content">{{(event.info && event.info.belongTitle) || '-'}}</div>
            </div>
            <div class="list-cell">
                <dot theme="outline" size="14" :fill="(event.info && event.info.color) || '#007bbb'"/>
                <div class="cell-content">{{event.info && getScope(event.info.scope) || '-'}}</div>
            </div>
        </div>
        <div class="event-options">
            <div class="event-options-cell" @click="editForm" v-if="event.info && event.info.isEdit">
                <edit-two theme="outline" size="14" fill="#91A0A5"/>
                <div class="options-tips">编辑</div>
            </div>
            <div class="event-options-cell" @click="delEvent" v-if="event.info && event.info.isEdit">
                <delete theme="outline" size="14" fill="#91A0A5"/>
                <div class="options-tips">删除</div>
            </div>
            <div class="event-options-cell">
                <share-one theme="outline" size="14" fill="#91A0A5"/>
                <div class="options-tips">分享</div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { toRefs, ref, watch, nextTick, computed } from 'vue'  
import { CalendarDot, LocalTwo, User, Dot, EditTwo, Delete, ShareOne, CloseSmall } from '@icon-park/vue-next'  
import { checkBorder } from '../lib/utils'
import { defaultConfig } from '../lib/config'
export default {
    name: 'EventDetail',
    props: {
        id: {
            type: String,
            default: null
        },
        event: {
            type: Object,
            default() {
                return {}
            }
        },
        dialogEventDetailVisible: {
            type: Boolean,
            default: false
        }
    },
    components: {
        Dot,
        User,
        Delete,
        EditTwo,
        ShareOne,
        LocalTwo,
        CloseSmall,
        CalendarDot
    },
    setup(props, context) {
        let { id, dialogEventDetailVisible, event } = toRefs(props)
        let visible = ref(dialogEventDetailVisible.value)
        const eventBox = ref(null)
        let position = ref({})
        const closePop = () => {
            visible.value = false
        }
        const getDistance = () => {
            if(Object.prototype.hasOwnProperty.call(event.value, 'scroll')) {
                nextTick(() => {
                    position.value = checkBorder(event.value.ele, eventBox.value.offsetHeight, event.value.scroll, event.value.headerHeight)
                })
            }else if(Object.prototype.hasOwnProperty.call(event.value, 'left')){
                nextTick(() => {
                    position.value = checkBorder(event.value.ele, eventBox.value.offsetHeight, null, null, event.value.left)
                })
            }else if(Object.prototype.hasOwnProperty.call(event.value, 'type')){
                nextTick(() => {
                    position.value = checkBorder(event.value.ele, eventBox.value.offsetHeight, null, null, null, event.value.type)
                })
            }else{
                nextTick(() => {
                    position.value = checkBorder(event.value.ele, eventBox.value.offsetHeight)
                })
            }
        }
        const editForm = () => {
            visible.value = false
            context.emit('editInfo', {
                event: event.value.info,
                id: id.value
            })
        }
        const delEvent = () => {
            context.emit('delEvent', event.value.info.id)
        }
        const getScope = computed(() => {
            return scope => {
                const result = defaultConfig.scope.find(item => {
                    return scope == item.id
                })
                if(result){
                    return result.name
                }else{
                    return ''
                }
            }
        })
        watch(() => dialogEventDetailVisible.value, 
            (oldVal, newVal) => {
                const val = oldVal || newVal
                visible.value = val
                getDistance()
            }
        )
        return {
            visible,
            closePop,
            eventBox,
            position,
            editForm,
            delEvent,
            getScope
        }
    }
}
</script>

<style scoped lang="scss">
.event-detail{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    .closeBg{
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 998;
    }
    .event-detail-content{
        padding: 10px;
        background: #fff;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
        position: absolute;
        width: 300px;
        border-radius: 4px;
        box-sizing: border-box;
        z-index: 999;
        // position: relative;
        .event-detail-title{
            font-size: 15px;
            color: #333;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--ss-color-primary-deep);
            padding-right: 20px;
            font-weight: bold;
            word-break: break-all;
            word-wrap: break-word;
        }
        :deep(.i-icon){
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .event-detail-list{
            margin-top: 10px;
            .list-cell{
                padding-bottom: 10px;
                display: flex;
                align-items: center;
                font-size: 12px;
                color: #333;
                .cell-content{
                    flex: 1;
                    overflow: hidden;
                    margin-left: 8px;
                }
            }
        }
        .event-options{
            border-top: 1px solid var(--ss-color-primary-deep);
            display: flex;
            align-items: center;
            padding: 10px 0 0;
            .event-options-cell{
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
                margin-right: 10px;
                flex: 1;
                border-right: 1px solid var(--ss-color-primary-deep);
                box-sizing: border-box;
                cursor: pointer;
                .options-tips{
                    margin-left: 8px;
                    color: #676662;
                }
            }
            .event-options-cell:last-child{
                margin-right: 0;
                border: none;
            }
        }
        .close-button{
            position: absolute;
            right: 10px;
            top: 10px;
            cursor: pointer;
        }
    }
}

</style>